<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useKeepAliveStore } from '@/stores/keepAlive'

const keepAliveStore = useKeepAliveStore()
const vueRoute = useRoute()

const keepAliveName = computed(() => keepAliveStore.keepAliveName)
// 监听路由的变化，判断是否需要keepAlive
watch(
  () => vueRoute.fullPath,
  () => {
    // eslint-disable-next-line ts/no-unused-expressions
    vueRoute.meta.keepAlive && keepAliveStore.addKeepAliveName(vueRoute.name as string)
  },
  { immediate: true },
)
</script>

<template>
  <ElConfigProvider :locale="zhCn">
    <div class="page-main">
      <router-view v-slot="{ Component, route }">
        <transition appear name="fade-transform" mode="out-in">
          <keep-alive :include="keepAliveName">
            <component :is="Component" :key="route.name" />
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </ElConfigProvider>
</template>

<style lang="scss">
.ds-layout {
  .logo {
    background-color: #212834;
  }
  .right-header {
    background-color: #212834;
  }
}
.page-main {
  background-color: #fff;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
